<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>
<!--
     管理员：  全部显示
     普通用户： 基础管理

    v-if    true    显示    false  隐藏    通过删除和追加节点实现
    v-show  true    显示    false  隐藏    通过添加内联样式 display：none

    如何选择：
       1.  基本原则：
          一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
          因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

-->

<div id="app">

    <ul>
        <li v-if="role">用户管理</li>
        <li v-show="role">角色管理</li>
        <li>基础管理</li>
    </ul>

    <hr>
    <!--
      v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
    -->
    <p v-if="false">hello v-if</p>
    <p v-else>hello v-else</p>
    <hr>

    <p v-if="number==0">hello v-if 0</p>
    <p v-else-if="number==1">hello else-if 1</p>
    <p v-else-if="number==2">hello else-if 2</p>
    <p v-else>hello v-else</p>

</div>


<script>

    let vm = new Vue({
        el: '#app',
        data: {
            role: 0 ,//  1 管理员  0  普通用户
            number:0
        },
        methods: {}
    })
</script>

</body>
</html>